import React, { ReactElement, useState, useEffect } from 'react';
import { getGoodsType, addTypes, addGoodsType } from '@/api/goodsType';
import { Button, message, TreeSelect, Form } from 'antd';
import ProForm, { DrawerForm, ProFormText } from '@ant-design/pro-form';
interface Props {
  reload: () => void;
  record: any;
  close: () => void;
  visible: boolean;
}

export default function AddGoodsType({
  reload,
  record,
  close,
  visible,
}: Props): ReactElement {
  //获取树形空间所需求的数据
  useEffect(() => {
    getData();
  }, []);

  const [treeData, setTreeData] = useState<any[]>([]);
  const getData = async () => {
    const res = await getGoodsType({});
    if (res.status == 200) {
      setTreeData([...res.data.rows.children]);
    }
  };

  const ADD_GOODS_TYPE = async (values: addTypes) => {
    const res = await addGoodsType(values);
    console.log(res);
    if (res.status === 200) {
      reload();
      message.success('新增成功');
      return true;
    } else {
      message.error('新增失败');
      return true;
    }
  };
  return (
    <DrawerForm
      title="新增类型"
      trigger={<Button style={{ marginRight: '20px' }}>新增商品类型</Button>}
      width={500}
      onFinish={async (values) => {
        values.status = '7';
        const res = await ADD_GOODS_TYPE(values as addTypes);

        return res;
      }}
    >
      <ProFormText label="商品类型名称：" name="name"></ProFormText>

      <Form.Item label="上级商品类型：" name="pid">
        <TreeSelect
          style={{ width: 400 }}
          dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
          treeData={treeData}
          placeholder="Please select"
        />
      </Form.Item>
    </DrawerForm>
  );
}
